// 渲染页面
// 设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

// 获取元素
// 
const form = document.querySelector('#bookForm')
const tb = document.querySelector('#tb')

const btnsk = document.querySelector('#btnsk')

// 请求获取数据，封装函数
const getBookList = () =>{
  axios({
    url:'/api/getbooks',
    menubar:"get",
  })  
  .then(({data:res})=>{
    // console.log(res);
    const{data}=res
    const htmlStr = data
    .map(item=>{
      return `<tr>
      <td>${item.id}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td><a href="#" data-id="${item.id}">删除</a></td>
    </tr>`
    })
    .join('')

    booksList.innerHTML = htmlStr
  })
  .catch(err =>{
    // console.log(err);
    alert(err.message)
  })
}

// 调用渲染函数
getBookList()
// 添加功能
form.addEventListener('submit',function(e){
  e.preventDefault()
  //获取form表单的值
  const data = serialize(this)
  console.log(data)
  // 发请求
  axios({
    url:'/api/addbook',
    method:'post',
    data,
  })
  .then(({data:res})=>{
    const {msg,status}=res
    alert(msg)

    if(status !== 201)return
    getBookList()
    // 充值表单的值
    form.reset()
  })
  .catch(err=>{
    alert(err.message)

  })
})
// 删除功能

// 绑定事件
booksList.addEventListener('click',function(e){
  if(e.target.target === "A"){
    // 获取id
    let id = e.target.dataset.id

    // 发删除请求
    axios({
      url:'/api/delbook',
      params:{id},
    })
    .then(({data:res})=>{
      const {msg,status}=res
      alert(msg)
      if(status !== 200) return
      getBookList()
    })
  }
})
